<template>
  <div class="board-wrap">
    <div class="flex-hor-layout top-row">
      <div class="item trade-paire">
        <el-select
          v-model="curPaire"
          class="black-select paire-select"
          popper-class="black-dropdown"
          placeholder="请选择"
        >
          <el-option
            v-for="item in paireOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
            <span style="float: left">{{ item.label }}</span>
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="index-row flex-hor-layout">
      <div class="item price-item">
        <div class="val">{{ curPrice }}</div>
      </div>
      <div class="item">
        <div class="title">
          <div class="val">
            <span class="more">多：--</span>
            <span class="less">空：--</span>
          </div>
          <div>持仓挖矿收益率</div>
        </div>
      </div>
      <div class="item">
        <div class="title">
          <div class="val">
            <span class="more">多：--</span>
            <span class="less">空：--</span>
          </div>
          <div>动仓费率（参考）</div>
        </div>
      </div>
      <div class="item high-low-item">
        <div class="title">
          <div>
            <span class="val">
              <span class="more">{{ candle1D.highest }}</span>
            </span>
            /
            <span class="val">
              <span class="less">{{ candle1D.lowest }}</span>
            </span>
          </div>
          <div>24h最高价 / 24h最低价</div>
        </div>
      </div>

      <div class="item high-low-item">
        <div class="title">
          <div>
            <span class="val">
              <span class="more">--</span>
            </span>
            /
            <span class="val">
              <span class="less">--</span>
            </span>
          </div>
          <div>24h交易额 / 24h交易量</div>
        </div>
      </div>
    </div>

    <div class="right-item bar-box">
      Time Range
      <template v-for="item in candleTypes">
        <button
          class="btn"
          :class="{ selected: item.bar === candleType.bar }"
          @click="changeBar(item)"
        >
          {{ item.label }}
        </button>
      </template>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  name: "StorageStatus",
  components: {},
  data() {
    return {
      curPaire: "",
      candleTypes: [
        { bar: "1m", label: "1m", name: "1m" },
        { bar: "5m", label: "5m", name: "5m" },
        { bar: "15m", label: "15m", name: "15m" },
        { bar: "30m", label: "30m", name: "30m" },
        { bar: "1H", label: "1h", name: "1h" },
        { bar: "4H", label: "4h", name: "4h" },
        { bar: "1D", label: "1D", name: "日K" },
        { bar: "1W", label: "1W", name: "周K" },
        { bar: "1M", label: "1M", name: "月K" }
        // {  bar: '1Y', label: '1Y', name: '年K' },
      ]
    };
  },
  computed: {
    ...mapGetters([
      "paire",
      "board",
      "curPrice",
      "candle1D",
      "candleType",
      "paireOptions"
    ])
  },
  watch: {
    curPaire: function(newVal) {
      this.$store.commit("user/SET_PAIRE", newVal);
    }
  },
  created() {
    this.curPaire = this.paire;
    this.updateBoard();
  },
  methods: {
    changeBar(item) {
      this.$store.commit("user/SET_CANDLE_TYPE", item);
    },
    updateBoard() {
      this.$store.dispatch("user/updateBoard");
    }
  }
};
</script>
<style lang="scss" scoped>
@import "./board.scss";
</style>
